import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';


void main()=>runApp(
    MaterialApp(
      home: Scaffold(
        body: MyApp(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.yellow,
        textTheme: TextTheme(),
        buttonTheme: ButtonThemeData(buttonColor: Colors.yellow),
      ),
    )
);

class MyApp extends StatefulWidget {

  @override
  State<StatefulWidget> createState() {
    return _MyAppState();
  }

}

class _MyAppState extends State<MyApp> {

  @override
  Widget build(BuildContext context) {
    return Padding(
        padding: EdgeInsets.fromLTRB(0,MediaQuery.of(context).padding.top,0,0),
        child: Column(
          children: [
            // 模糊进度条(会执行一个动画)
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: LinearProgressIndicator(
                backgroundColor: Colors.grey[200],
                valueColor: AlwaysStoppedAnimation(Colors.blue),
              ),
            ),
            //进度条显示50%
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: LinearProgressIndicator(
                backgroundColor: Colors.grey[200],
                valueColor: AlwaysStoppedAnimation(Colors.blue),
                value: .5,
              ),
            ),
            // 模糊进度条(会执行一个旋转动画)
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: CircularProgressIndicator(
                backgroundColor: Colors.grey[200],
                valueColor: AlwaysStoppedAnimation(Colors.blue),
              ),
            ),
            //进度条显示50%，会显示一个半圆
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: CircularProgressIndicator(
                backgroundColor: Colors.grey[200],
                valueColor: AlwaysStoppedAnimation(Colors.blue),
                value: .5,
              ),
            ),
            // 线性进度条高度指定为3
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: SizedBox(
                height: 3,
                child: LinearProgressIndicator(
                  backgroundColor: Colors.grey[200],
                  valueColor: AlwaysStoppedAnimation(Colors.blue),
                  value: .5,
                ),
              ),
            ),
            // 圆形进度条直径指定为100
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: SizedBox(
                height: 100,
                width: 100,
                child: CircularProgressIndicator(
                  backgroundColor: Colors.grey[200],
                  valueColor: AlwaysStoppedAnimation(Colors.blue),
                  value: .7,
                ),
              ),
            ),
            ProgressRoute()
          ],
        )

    );
  }
}
class ProgressRoute extends StatefulWidget {
  @override
  _ProgressRouteState createState() => _ProgressRouteState();
}

class _ProgressRouteState extends State<ProgressRoute> with SingleTickerProviderStateMixin {
  late AnimationController _animationController;

  @override
  void initState() {
    //动画执行时间3秒
    _animationController = AnimationController(
      vsync: this, //注意State类需要混入SingleTickerProviderStateMixin（提供动画帧计时/触发器）
      duration: Duration(seconds: 3),
    );
    _animationController.forward();
    _animationController.addListener(() => setState(() => {}));
    super.initState();
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: <Widget>[
          Padding(
            padding: EdgeInsets.all(16),
            child: LinearProgressIndicator(
              backgroundColor: Colors.grey[200],
              valueColor: ColorTween(begin: Colors.grey, end: Colors.blue)
                  .animate(_animationController), // 从灰色变成蓝色
              value: _animationController.value,
            ),
          ),
          _Progressbar()
        ],
      ),
    );
  }
}


class _Progressbar extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Row(
        children: [
          Expanded(
            //圆角矩形
              child:ClipRRect(
                //圆角大小
                  borderRadius: BorderRadius.all(Radius.circular(6)),
                  child: Container(
                      height: 16,
                      //叠层到一起
                      child: GestureDetector(
                        child: buildStack(),
                      )
                  )
              )
          ),
          Text("100条")
        ]
    );
  }

  Stack buildStack() {

    const LinearGradient linear = LinearGradient(
      begin: Alignment.centerLeft,
      end: Alignment.centerRight,
      colors: [Colors.black,Colors.red],
    );

    return Stack(
      children: [
        // 背景
        Positioned.fill(
            child: Container(
              height: 16,
              color: Colors.grey,
            )
        ),
        // 进度
        ClipRect(
          //对齐
            child:Align(
              // 剪裁比例
                widthFactor: 0.6,
                child: Container(
                  height: 16,
                  decoration: BoxDecoration(
                    //线性渐变
                    gradient: linear,
                  ),
                )
            )
        ),

      ],
    );
  }
}




